<template>
		<view class="Container">
			<view class="header">
				<image class="header_img" src="//dist.vipmro.com/smb/m-static/static/img/banner.0769574.png"></image>
			</view>
			
			<view class="cont">
				<view class="cont_top">
					<image class="cont_top_img" src="//dist.vipmro.com/smb/m-static/static/img/c-coupon.8d54286.png" mode=""></image>
				</view>
				
				<view class="cont_bot">
					<view class="res">
							<image class="cont_img" :src="Goods.overtMorningGoods.image" mode=""></image>
						<view class="con">
							<view class="cont_rig">{{Goods.overtMorningGoods.goodsName}}</view>
							<view class="cont_con">限量{{Goods.overtMorningGoods.perLimit}}份</view>
							<view class="pic">
								<view class="pic_q">抢</view>
								<view class="pic_x">￥{{Goods.overtMorningGoods.morningPrice}}</view>
								<view class="pic_y">{{Goods.overtMorningGoods.price}}</view>
							</view>
						</view>
					</view>
						
					<view class="list">{{Goods.overtMorningGoods.saleLabel}}</view>
				</view>
			</view>
			
			<view class="seckill">
				<view class="title">
					限量秒杀 劲爆抢购
				</view>
				<view class="res" v-for="(inner,index) in Goods.innerMorningGoods" :key="inner.id">
						<image class="cont_img" :src="inner.image" mode=""></image>
					<view class="con">
						<view class="cont_rig">{{inner.goodsName}}</view>
						<view class="cont_con">限量{{inner.perLimit}}份</view>
						<view class="pic">
							<view class="pic_q">抢</view>
							<view class="pic_x">￥{{inner.morningPrice}}</view>
							<view class="pic_y">{{inner.price}}</view>
						</view>
						<view class="list">{{inner.saleLabel}}</view>
					</view>
				</view>
				
			</view>
			
			<view class="name">
				{{goodData.config.title}}
			</view>
						
			<view class="cabbage">
				
				<view class="floor">
					<view class="floor_left" v-for="(goods,index) in goodData.goods" :key="goods.goodsId">
						<image class="floor_img" :src="goods.goodsImg" mode=""></image>
					
						<view class="floor_boot">
							<view class="floor_text">{{goods.goodsName}}</view>
							<view class="floor_pic">
								<view class="icon">企</view>
								<view class="pic">￥{{goods.priceMap.salePrice}}</view>
								<view class="del">{{goods.priceMap.price}}</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
			this.getSaleList()
			this.getGoodData()
		},
		methods: {
			getSaleList() {
				this.$store.dispatch('category/getSaleList')
			},
			getGoodData() {
				this.$store.dispatch('category/getGoodData')
			}
		},
		computed: {
			...mapState('category', ['saleList','goodData',]),
			...mapGetters('category',['Goods',])
		}
	}
</script>

<style lang="stylus">
	.Container
		.header
			.header_img
				width: 100%
				height: 480upx
		.cont
			height: 500upx
			background-color: #f9ba4d
			padding: 20upx 20upx
			.cont_top
				width: 690upx
				height: 100upx
				background-color: #fff
				border: 2upx solid red
				border-radius: 20upx
				display: flex
				.cont_top_img
					width: 580upx
					height: 70upx
					margin: auto
			.cont_bot
				width: 690upx
				height: 370upx
				background-color: #fff
				border-radius: 20upx
				margin: 20upx 0
				.res
					height: 200upx
					display: flex
					padding: 20upx 20upx 
					.cont_img
						width: 210upx
						height: 210upx
					.con
						width: 400upx
						height: 210upx
						padding: 20upx
						.cont_rig
							font-size: 27upx
						.cont_con
							width: 90upx
							height: 30upx
							font-size: 20upx
							background-color: red
							color: #fff
							text-align: center
							margin: 20upx 0
						.pic
							display: flex
							.pic_q
								width: 35upx
								height: 35upx
								line-height: 35upx
								color: #fff
								font-size: 20upx
								background-color: #ffb600
								text-align: center
							.pic_x
								font-size: 28upx
								color: red
								margin: 0 20upx
							.pic_y
								font-size: 26upx
								color:#dddddd
								text-decoration:line-through
				.list
					width: 650upx
					height: 70upx
					background-color: red
					font-size: 30upx
					color: #fff
					margin: 20upx 20upx 
					border-radius: 15upx
					line-height: 70upx
					text-align: center
		.seckill
			margin-top: 40upx
			.title
				height: 60upx
				line-height: 60upx
				font-size: 30upx
				font-weight: bold
				padding: 0 40upx
			.res
				height: 290upx
				display: flex
				padding: 20upx 20upx 
				.cont_img
					width: 210upx
					height: 210upx
				.con
					width: 500upx
					height: 210upx
					padding: 20upx
					.cont_rig
						font-size: 27upx
						display: -webkit-box
						-webkit-box-orient: vertical
						-webkit-line-clamp: 2
						overflow: hidden 
					.cont_con
						width: 90upx
						height: 30upx
						font-size: 20upx
						background-color: red
						color: #fff
						text-align: center
						margin: 20upx 0
					.pic
						display: flex
						.pic_q
							width: 35upx
							height: 35upx
							line-height: 35upx
							color: #fff
							font-size: 20upx
							background-color: #ffb600
							text-align: center
						.pic_x
							font-size: 28upx
							color: red
							margin: 0 20upx
						.pic_y
							font-size: 26upx
							color:#dddddd
							text-decoration:line-through	
					.list
						width: 150upx
						height: 60upx
						line-height: 60upx
						text-align: center
						background-color: red
						color: #fff
						font-size: 28upx
						border-radius: 15upx
						float:right
		.name
			height: 80upx
			font-size:30upx
			line-height: 80upx
			background-color: #f2f2f2
			padding: 20upx 20upx
		.cabbage	
			background-color: #f2f2f2 
			padding: 20upx 20upx
			display: flex
				
			.floor
				background-color: #f2f2f2
				display: flex
				flex-wrap: wrap
				.floor_left
					width: calc(50% - 30upx) 
					height: 450upx
					border-radius: 25upx
					overflow: hidden
					margin: 10upx 15upx		
					background-color: #fff
					.floor_img
						width: 100%
						height: 280upx
					.floor_boot
						padding: 0 10upx
						.floor_text
							font-size: 24upx
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;   /** 多行文本溢出...*/
							overflow: hidden; 
						.floor_pic
							display: flex
							padding-top: 10upx
							.icon
								width: 35upx
								height: 35upx
								background-color: red
								color: #fff
								font-size: 22upx
								text-align: center
								border-radius: 8upx
							.pic
								font-size: 32upx
								padding-left: 10upx
							.del
								padding: 5upx
								font-size: 24upx
								text-decoration:line-through;	
					
					
</style>
